<template>
<div class="pager" >
    <a href="#" :class="{'pagerItem':true,disabled:page===1}"  @click.prevent="pageChange(1)">首页</a>
    <a href="#" :class="{'pagerItem':true,disabled:page===1}" @click.prevent="pageChange(page-1)">上一页</a>
    <a href="#" :class="{'pagerItem':true,active:page===item}" @click.prevent="pageChange(item)" v-for="item in panelArr" :key="item">{{item}}</a>
    <a href="#" :class="{'pagerItem':true,disabled:page===pageNumber}" @click.prevent="pageChange(page+1)">下一页</a>
    <a href="#" :class="{'pagerItem':true,disabled:page===pageNumber}"  @click.prevent="pageChange(pageNumber)">尾页</a>
    <span class="pager-text">
        <i>{{page}}</i>
        /
        <i>{{pageNumber}}</i>
    </span>
</div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    props:{
        page:{ //当前页
            type:Number,
            default:1
        },
        total:{ //总数据数
            type:Number,
            default:0
        },
        limit:{ //页容量：每页显示多少条数据
            type:Number,
            default:10
        },
        panelNumber:{ //最多显示多少数字页码
            type:Number,
            default:10
        }
    },
    computed: {
        pageNumber(){ //总页数
            return Math.ceil(this.total / this.limit)
        },
        panelArr(){  //当前显示的页码数组
            let min = this.page - Math.floor(this.panelNumber/2)
            if(min < 1) {min = 1}
            let max = min + this.panelNumber - 1
            if(max > this.pageNumber) {max = this.pageNumber}
            let arr = []
            for(let i=min;i<=max;i++){
                arr.push(i)
            }
            return arr
        }
    },
    methods: {
        pageChange(n){
            if(n < 1){
                n = 1
            }else if(n > this.pageNumber){
                n = this.pageNumber
            }
            if(n === this.page){
                return
            }
            this.$emit("pageChange",n)
        }
    },
}
</script>


<style scoped>
.pager{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
a{
    text-decoration: none;
    color: #333;
}
ul{
    list-style: none;
}
.pagerItem{
    padding: 5px;
    border: 1px solid black;
    /* border-radius: 10px; */
    margin:0 10px;
}
.disabled{
    opacity: 0.6;
}
.active{
    background-color: pink;
    color: white;
}
</style>